- breadcrumb_title s_('AccessTokens|Access tokens')
- page_title _('Group access tokens')
- type = _('group access token')
- type_plural = _('group access tokens')
- @force_desktop_expanded_sidebar = true

= render ::Layouts::SettingsSectionComponent.new(page_title, options: { class: 'js-search-settings-section' }) do |c|
  - c.with_description do
    - help_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_path('user/group/settings/group_access_tokens.md') }
    - if current_user.can?(:create_resource_access_tokens, @group)
      = _('Generate group access tokens scoped to this group for your applications that need access to the GitLab API.')
      = html_escape(_('You can also use group access tokens with Git to authenticate over HTTP(S). %{link_start}Learn more.%{link_end}')) % { link_start: help_link_start, link_end: '</a>'.html_safe }
    - else
      = _('Group access token creation is disabled in this group.')
      - root_group = @group.root_ancestor
      - if current_user.can?(:admin_group, root_group)
        - group_settings_link = edit_group_path(root_group)
        - link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: group_settings_link }
        = html_escape(_('You can enable group access token creation in %{link_start}group settings%{link_end}.')) % { link_start: link_start, link_end: '</a>'.html_safe }
      = html_escape(_('You can still use and manage existing tokens. %{link_start}Learn more.%{link_end}')) % { link_start: help_link_start, link_end: '</a>'.html_safe }

  - c.with_body do
    #js-new-access-token-app{ data: { access_token_type: type } }

    = render ::Layouts::CrudComponent.new(_('Active group access tokens'),
      icon: 'token',
      count: @active_access_tokens_size,
      count_options: { class: 'js-token-count' },
      form_options: { class: 'gl-hidden js-toggle-content js-add-new-token-form' },
      options: { class: 'js-toggle-container js-token-card' }) do |c|
      - c.with_actions do
        - if current_user.can?(:create_resource_access_tokens, @group)
          = render Pajamas::ButtonComponent.new(size: :small, button_options: { class: 'js-toggle-button js-toggle-content', data: { testid: 'add-new-token-button' } }) do
            = _('Add new token')

      - c.with_form do
        - if current_user.can?(:create_resource_access_tokens, @group)
          = render 'shared/access_tokens/form',
            ajax: true,
            type: type,
            path: group_settings_access_tokens_path(@group),
            resource: @group,
            token: @resource_access_token,
            scopes: @scopes,
            access_levels: @group.roles_user_can_assign(current_user),
            default_access_level: Gitlab::Access::GUEST,
            prefix: :resource_access_token,
            description_prefix: :group_access_token,
            help_path: help_page_path('user/group/settings/group_access_tokens.md', anchor: 'scopes-for-a-group-access-token')

      - c.with_body do
        #js-access-token-table-app{ data: { access_token_type: type, access_token_type_plural: type_plural, backend_pagination: 'true', initial_active_access_tokens: @active_access_tokens.to_json, no_active_tokens_message: _('This group has no active access tokens.'), show_role: true } }

    .gl-mt-5
      = render ::Layouts::CrudComponent.new(_('Inactive group access tokens'),
        icon: 'token',
        count: @inactive_access_tokens_size) do |c|
        - c.with_body do
          #js-inactive-access-token-table-app{ data: { no_inactive_tokens_message: _('This group has no inactive access tokens.'), pagination_url: inactive_group_settings_access_tokens_url(@group, format: :json) } }
